<template>
	<ph-list-item 
	@click="onSelect"
	class="ph-dropdown-item" 
	:icon="multiple?checkicon:icon"
	:active="checked">
	<slot></slot>
	</ph-list-item>
</template>
<script lang="ts">
    import { computed, defineComponent, inject, Ref} from 'vue'
	import { PhListItem } from 'ph-list'
	export default defineComponent({
		components:{
			PhListItem
		},
		props:{
			icon:String,
			action:{
				type:String, //item 唯一标识，可以唯空,
				default:""
			}
		},
		setup(props,{emit}){
			const onAction = inject<(k:string,b?:boolean)=>void>('dropdownAction')
			const hide = inject<()=>void>('hide')
			const multiple = inject<Ref<boolean>>("multiple")
			const cacheCheckes = inject<Ref<Array<string>>>("cacheCheckes")
			const checked = computed(()=>{
				return multiple?.value&&cacheCheckes&&cacheCheckes.value.includes(props.action)
			})
			const checkicon = computed(()=>{
				return checked.value?"fa-check-square":"fa-square-o"
			})
			const onSelect = ()=>{
				emit("action",props.action,!checked.value)
				onAction&&onAction(props.action,!checked.value)
				;!multiple?.value&&hide&&hide()
			}
			return {onSelect,checkicon,multiple,checked}
		},
		
	})
</script>